<template>
  <div id="app">
    <!-- 粒子背景 -->
    <div class="particles-container">
      <canvas ref="particlesCanvas" class="particles-canvas"></canvas>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <div class="nav-logo">
          <img src="./assests/images/logo.png" alt="RPA Bot" class="logo-img">
          <span class="logo-text">员工矩阵系统</span>
          <span class="logo-slogan">全自动化自媒体矩阵平台</span>
        </div>
        <div class="nav-menu">
          <a href="#home" class="nav-link">首页</a>
          <a href="#products" class="nav-link">产品</a>
          <a href="#features" class="nav-link">特性</a>
          <a href="#pricing" class="nav-link price-link"><span class="price-badge">¥9.9起</span>价格</a>
          <a href="#contact" class="nav-link">联系我们</a>
        </div>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
      <!-- 首页区域 -->
      <section id="home" class="hero-section">
        <div class="hero-container">
          <div class="hero-content">
            <h1 class="hero-title">
              <span class="gradient-text">AI+RPA</span>
              <br>数字员工系统
            </h1>
            <p class="hero-subtitle">
              专业的全自动化矩阵系统，提供公众号矩阵机器人和小红书矩阵克隆机器人，打造智能数字员工系统，实现自媒体矩阵全自动化运营
            </p>
            <div class="hero-buttons">
              <el-button type="primary" size="large" class="cta-button" @click="scrollToProducts">
                <el-icon><ArrowRight /></el-icon>
                探索全自动打工人
              </el-button>
            </div>
          </div>
          <div class="hero-visual">
            <div class="floating-card">
              <RobotIcon class="robot-icon" />
            </div>
          </div>
        </div>
      </section>

      <!-- 产品区域 -->
      <section id="products" class="products-section">
        <div class="section-container">
          <h2 class="section-title">全自动化矩阵系统核心产品</h2>
          <div class="products-grid">
            <!-- 公众号矩阵机器人 -->
            <div class="product-card">
              <div class="product-icon">
                <img src="./assests/images/mp-robot.png" alt="公众号矩阵机器人" class="product-image">
              </div>
              <h3 class="product-title">公众号矩阵机器人</h3>
              <p class="product-description">
                专业的公众号矩阵数字员工系统，基于比特指纹浏览器的全自动化内容生产平台。通过AI大模型生成高质量文章，支持图片提取和自定义提示词，完美适配公众号矩阵运营需求，实现数字员工系统全自动化管理。
              </p>
              <div class="product-features">
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>AI智能写作</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>自动配图</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>定时任务</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>自动发布</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>矩阵管理</span>
                </div>
              </div>
              <el-button type="primary" class="product-button" @click="goToProduct">
                注册免费体验
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>

            <!-- 小红书克隆机器人 -->
            <div class="product-card">
              <div class="product-icon">
                <img src="./assests/images/xhs-robot.png" alt="小红书矩阵机器人" class="product-image">
              </div>
              <h3 class="product-title">小红书矩阵克隆机器人</h3>
              <p class="product-description">
                专业的小红书矩阵数字员工系统，智能克隆小红书图文笔记，全自动化重新生成文案，图片去重处理。支持小红书矩阵多账号同时操作，实现全自动化矩阵系统管理，大幅提升数字员工系统内容创作效率。
              </p>
              <div class="product-features">
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>内容克隆</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>图片去重</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>AI改写</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>定时任务</span>
                </div>
                <div class="feature-item">
                  <el-icon><Check /></el-icon>
                  <span>批量发布</span>
                </div>
              </div>
              <el-button type="primary" class="product-button" @click="goToProduct">
                注册免费体验
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 特性区域 -->
      <section id="features" class="features-section">
        <div class="section-container">
          <h2 class="section-title">数字员工系统核心特性</h2>
          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon">
                <AiIcon />
              </div>
              <h3>AI智能数字员工</h3>
              <p>基于先进的大语言模型，数字员工系统智能生成高质量内容，实现全自动化矩阵系统内容创作</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <AutomationIcon />
              </div>
              <h3>全自动化矩阵系统</h3>
              <p>从内容生成到发布，全自动化矩阵系统全流程模拟人工操作，数字员工系统24小时不间断工作</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <MatrixIcon />
              </div>
              <h3>公众号矩阵管理</h3>
              <p>支持公众号矩阵和小红书矩阵多账号批量管理，全自动化矩阵系统提升运营效率</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <SecurityIcon />
              </div>
              <h3>数字员工安全保障</h3>
              <p>基于<a href="https://www.bitbrowser.cn/?code=c2000e" target="_blank">比特指纹浏览器</a>，全自动化矩阵系统指纹隔离确保公众号矩阵和小红书矩阵账号安全</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 价格套餐区域 -->
      <section id="pricing" class="pricing-section">
        <div class="section-container">
          <h2 class="section-title">积分充值套餐</h2>
          <p class="pricing-subtitle">选择适合您的套餐，开启智能办公之旅</p>
          <div class="pricing-grid">
            <!-- 尝鲜套餐 -->
            <div class="plan-card">
              <span class="plan-tag">推荐新手</span>
              <h3 class="plan-title">尝鲜套餐</h3>
              <div class="plan-price"><span class="currency">¥</span><span class="amount">9.9</span></div>
              <p class="plan-bonus">送 1,000 积分</p>
              <ul class="plan-features">
                <li>仅可绑定1个比特窗口</li>
                <li>适合轻度使用</li>
                <li>体验RPA+AI的魅力</li>
                <li>微信客服答疑</li>
              </ul>
              <el-button type="primary" class="plan-button" @click="openContactDialog">立即购买</el-button>
            </div>
            <!-- 标准套餐 -->
            <div class="plan-card highlight">
              <span class="plan-tag">标准版</span>
              <h3 class="plan-title">标准套餐</h3>
              <div class="plan-price"><span class="currency">¥</span><span class="amount">199</span></div>
              <p class="plan-bonus">送 19,900 积分</p>
              <ul class="plan-features">
                <li>仅可绑定2个比特窗口</li>
                <li>稳定输出</li>
                <li>性价比优选</li>
                <li>微信客服答疑</li>
              </ul>
              <el-button type="primary" class="plan-button" @click="openContactDialog">立即购买</el-button>
            </div>
            <!-- 进阶套餐 -->
            <div class="plan-card">
              <span class="plan-tag">热门选择</span>
              <h3 class="plan-title">进阶套餐</h3>
              <div class="plan-price"><span class="currency">¥</span><span class="amount">1299</span></div>
              <p class="plan-bonus">送 139,000 积分</p>
              <ul class="plan-features">
                <li>仅可绑定5个比特窗口</li>
                <li>更高并发与效率</li>
                <li>功能更全面</li>
                <li>客服远程支持</li>
              </ul>
              <el-button type="primary" class="plan-button" @click="openContactDialog">立即购买</el-button>
            </div>
            <!-- 专业套餐 -->
            <div class="plan-card">
              <span class="plan-tag">专业版</span>
              <h3 class="plan-title">专业套餐</h3>
              <div class="plan-price"><span class="currency">¥</span><span class="amount">3999</span></div>
              <p class="plan-bonus">送 420,000 积分</p>
              <ul class="plan-features">
                <li>5个窗口以上建议此套餐</li>
                <li>开放所有机器人共用</li>
                <li>最大灵活性</li>
                <li>客服远程支持</li>
              </ul>
              <el-button type="primary" class="plan-button" @click="openContactDialog">立即购买</el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 常见问题区域 -->
      <section id="faq" class="faq-section">
        <div class="section-container">
          <h2 class="section-title">常见问题</h2>
          <div class="faq-container">
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>什么是全自动化矩阵系统？</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <p>全自动化矩阵系统是一套集成了公众号矩阵和小红书矩阵的智能化运营平台。通过RPA+AI技术，实现内容创作、发布等全流程自动化管理，帮助企业高效运营多个社交媒体账号。</p>
              </div>
            </div>
            
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>矩阵系统如何保证账号安全？会不会封号？</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <p>我们基于比特指纹浏览器技术，每个账号都有独立的浏览器环境和指纹隔离。RPA会模拟真实用户行为，确保公众号矩阵和小红书矩阵账号的安全运营。封号问题基本跟内容有关，建议用户在使用时注意账号的使用频率和内容的侵权，避免触发平台的安全机制。</p>
              </div>
            </div>
            
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>系统支持哪些平台的矩阵运营？</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <p>目前系统主要支持微信公众号矩阵和小红书矩阵的自动化运营。我们正在不断扩展平台支持，未来将覆盖更多主流社交媒体平台，为用户提供更全面的矩阵运营解决方案。</p>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>还有哪些额外费用？</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <ul class="faq-list">
                  <li>咱们矩阵系统本身提供的是内容生产+自动发布功能，还有2项看业务来定：比特窗口数和代理ip</li>
                  <li>比特窗口数是在比特平台购买（免费有10个窗口，<a href="https://www.bitbrowser.cn/?code=c2000e" target="_blank" class="faq-link">点击注册</a>）</li>
                  <li>代理ip是在代理ip平台购买（免费有100个ip，<a href="https://www.kuaidaili.com/free/" target="_blank" class="faq-link">点击注册</a>），账号超过10个，则需要自行购买窗口，参考价格：<span class="price-highlight">50窗口/50元/月</span></li>
                  <li>代理ip：如果平台对ip限制较高，建议购买代理ip，例如：公众号建议1个ip下的窗口数不超过5个，小红书较为严格1个ip对应一个窗口，参考价格：<span class="price-highlight">1个ip/8元/月</span>，<a href="https://sk5ip.cn/views/login.html#?promotionCode=BB00078FA9AB4E7CA338F4BB342F7229" target="_blank" class="faq-link">点击直达</a></li>
                </ul>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>怎么登录账号？</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <ul class="faq-list">
                  <li>账号是跟着比特窗口走的，例如1号窗口登录了公众号A，那么发布时就是基于该账号发布的</li>
                  <li>公众号需要每3天登录一次，小红书有时候几个月都不会掉登，经常使用就不会掉登</li>
                  <li class="important-note"><strong>若未登录，则需要运行机器人之前或运行过程中，需要人为登录账号</strong></li>
                </ul>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-question" @click="toggleFaq">
                <h3>更多使用教程</h3>
                <span class="faq-toggle">+</span>
              </div>
              <div class="faq-answer">
                <p><a href="https://aqoyanyhfa.feishu.cn/docx/HrAzdTMphoWr7VxzIAhcwGbznsf" target="_blank" class="faq-link">员工矩阵使用教程</a></p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系我们区域 -->
      <section id="contact" class="contact-section">
        <div class="section-container">
          <h2 class="section-title">联系我们 - 全自动化矩阵系统咨询</h2>
          <div class="contact-content">
            <div class="contact-info">
              <h3>获取数字员工系统更多信息</h3>
              <p>扫描微信二维码，了解公众号矩阵、小红书矩阵、全自动化矩阵系统产品详情</p>
            </div>
            <div class="qr-code">
              <img src="./assests/images/dahuzirpa.png" alt="微信二维码" class="qr-image">
              <p>微信咨询</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- SEO关键词区域 -->
    <div class="seo-keywords">
      <p>员工矩阵系统专注于公众号矩阵、小红书矩阵、数字员工系统、全自动化矩阵系统的研发与服务。我们的全自动化矩阵系统为企业提供专业的数字员工系统解决方案，通过公众号矩阵机器人和小红书矩阵克隆机器人，实现自媒体矩阵的全自动化运营管理。</p>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-container">
        <p>&copy; 2025 员工矩阵系统 - 专业的全自动化矩阵系统 | 公众号矩阵 | 小红书矩阵. All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2025149829号</a></p>
      </div>
    </footer>

    <!-- 微信客服弹窗 -->
    <el-dialog
      v-model="showContactDialog"
      title="联系微信客服"
      width="400px"
      :center="true"
      :modal="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
    >
      <div class="contact-dialog-content">
        <div class="qr-section">
          <img src="./assests/images/dahuzirpa.png" alt="微信二维码" class="dialog-qr-image">
        </div>
        <div class="contact-info-section">
          <h3>添加微信客服</h3>
          <p class="wechat-id">微信号：<span class="highlight">dahuzirpa</span></p>
          <p class="contact-tip">扫描上方二维码或搜索微信号添加客服，获取购买链接和专业咨询服务</p>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="showContactDialog = false">我知道了</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ArrowRight, Check } from '@element-plus/icons-vue'

// SVG 图标组件
import RobotIcon from './components/icons/RobotIcon.vue'
import AiIcon from './components/icons/AiIcon.vue'
import AutomationIcon from './components/icons/AutomationIcon.vue'
import MatrixIcon from './components/icons/MatrixIcon.vue'
import SecurityIcon from './components/icons/SecurityIcon.vue'

// 粒子动画相关
const particlesCanvas = ref(null)
let animationId = null
let particles = []

// 弹窗相关
const showContactDialog = ref(false)

// 方法
const scrollToProducts = () => {
  document.getElementById('products').scrollIntoView({ behavior: 'smooth' })
}

const goToProduct = () => {
  window.open('http://saas.rpabot.site/index', '_blank')
}

const openContactDialog = () => {
  showContactDialog.value = true
}

// FAQ交互功能
const toggleFaq = (event) => {
  const faqItem = event.currentTarget.closest('.faq-item')
  faqItem.classList.toggle('active')
}

// 粒子动画初始化
const initParticles = () => {
  const canvas = particlesCanvas.value
  if (!canvas) return

  const ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  // 创建粒子
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.5,
      vy: (Math.random() - 0.5) * 0.5,
      size: Math.random() * 2 + 1,
      opacity: Math.random() * 0.5 + 0.2
    })
  }

  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    particles.forEach(particle => {
      particle.x += particle.vx
      particle.y += particle.vy

      if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1
      if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1

      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
      ctx.fillStyle = `rgba(99, 102, 241, ${particle.opacity})`
      ctx.fill()
    })

    animationId = requestAnimationFrame(animate)
  }

  animate()
}

const handleResize = () => {
  if (particlesCanvas.value) {
    particlesCanvas.value.width = window.innerWidth
    particlesCanvas.value.height = window.innerHeight
  }
}

onMounted(() => {
  initParticles()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}

/* 粒子背景 */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.particles-canvas {
  width: 100%;
  height: 100%;
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(15, 15, 35, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  z-index: 1000;
  padding: 1rem 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-img {
  height: 40px;
  width: auto;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-slogan {
  font-size: 0.75rem;
  font-weight: 400;
  color: #94a3b8;
  margin-left: 0.5rem;
  opacity: 0.8;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: #6366f1;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* 价格入口样式 */
.price-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.price-badge {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.35);
}

.price-link:hover .price-badge {
  transform: translateY(-1px);
}

/* 主要内容 */
.main-content {
  position: relative;
  z-index: 1;
  padding-top: 80px;
}

/* 英雄区域 */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #cbd5e1;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

.cta-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  animation: float 6s ease-in-out infinite;
}

.robot-icon {
  width: 200px;
  height: 200px;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* 通用区域样式 */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.section-title {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 产品区域 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.product-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.product-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f1f5f9;
}

.product-description {
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.product-features {
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #e2e8f0;
}

.product-button {
  width: 100%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
}

/* 特性区域 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #f1f5f9;
}

.feature-card p {
  color: #cbd5e1;
  line-height: 1.5;
}

.feature-card p a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.feature-card p a:hover {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

/* 定价区域 */
.pricing-section {}

.pricing-subtitle {
  text-align: center;
  color: #94a3b8;
  margin-top: -2rem;
  margin-bottom: 2rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.plan-card {
  position: relative;
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.plan-card.highlight {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
}

.plan-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.plan-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.5rem 0 1rem;
  color: #f1f5f9;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.plan-price .currency {
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-price .amount {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-bonus {
  color: #22c55e;
  font-weight: 600;
  margin-bottom: 1rem;
}

.plan-features {
  list-style: none;
  text-align: left;
  margin: 1rem 0 1.5rem;
  padding: 0 0.5rem;
}

.plan-features li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0.35rem 0;
  color: #e2e8f0;
}

.plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
  font-weight: 900;
}

.plan-button {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border: none;
  border-radius: 12px;
}

/* 联系区域 */
.contact-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  text-align: center;
}

.contact-info h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f1f5f9;
}

.contact-info p {
  color: #cbd5e1;
  font-size: 1.1rem;
}

.qr-code {
  text-align: center;
}

.qr-image {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  border: 2px solid rgba(99, 102, 241, 0.3);
  margin-bottom: 1rem;
}

/* SEO关键词区域 */
.seo-keywords {
  background: rgba(15, 15, 35, 0.6);
  padding: 1rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.seo-keywords p {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0.7;
}

/* 页脚 */
.footer {
  background: rgba(15, 15, 35, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer p {
  color: #94a3b8;
}

.footer p a {
  color: #94a3b8;
  text-decoration: none;
}

.footer p a:hover {
  color: #e2e8f0;
  text-decoration: underline;
}

/* 弹窗样式 */
.contact-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.qr-section {
  margin-bottom: 20px;
}

.dialog-qr-image {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 2px solid #f0f0f0;
}

.contact-info-section h3 {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.wechat-id {
  font-size: 16px;
  color: #666;
  margin: 10px 0;
}

.wechat-id .highlight {
  color: #07c160;
  font-weight: 600;
  background: linear-gradient(135deg, #07c160, #00d976);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-tip {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  margin: 15px 0 0 0;
}

/* FAQ常见问题区域 */
.faq-section {
  background: rgba(15, 15, 35, 0.8);
  backdrop-filter: blur(10px);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(99, 102, 241, 0.1);
}

.faq-question h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.faq-toggle {
  font-size: 1.5rem;
  font-weight: bold;
  color: #6366f1;
  transition: transform 0.3s ease;
  user-select: none;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 2rem 1.5rem 2rem;
}

.faq-answer p {
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
  font-size: 1rem;
}

/* FAQ超链接样式 */
.faq-link {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-link:hover {
  color: #93c5fd;
  border-bottom-color: #60a5fa;
  transform: translateY(-1px);
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

/* 价格高亮样式 */
.price-highlight {
  color: #fbbf24;
  font-weight: 600;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  display: inline-block;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.price-highlight:hover {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* FAQ列表样式 */
.faq-list {
  margin: 0;
  padding-left: 1.5rem;
  list-style: none;
}

.faq-list li {
  position: relative;
  margin-bottom: 0.8rem;
  color: #cbd5e1;
  line-height: 1.6;
  padding-left: 1.2rem;
}

.faq-list li::before {
  content: "•";
  color: #6366f1;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.faq-list li.important-note {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.8rem 1rem 0.8rem 2rem;
  margin-top: 1rem;
}

.faq-list li.important-note::before {
  content: "⚠";
  color: #ef4444;
  font-size: 1.1rem;
  left: 0.5rem;
  top: 0.8rem;
}

.faq-list li.important-note strong {
  color: #fca5a5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .nav-menu {
    display: none;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .faq-question {
    padding: 1rem 1.5rem;
  }
  
  .faq-question h3 {
    font-size: 1.1rem;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 1.5rem 1rem 1.5rem;
  }
}
</style>
